import {View, Text, Swiper, SwiperItem, Image, Block} from '@tarojs/components'
import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import {IndexDiyModule, IndexDiyModuleLimit} from 'src/utils/server.interface'
import {AtIcon} from 'taro-ui'
import {gotoPage} from '../../utils/tools'
import Float from '../../components/float/float';
import {platform} from "../../utils/platform-settting.service";
import './index-sale.scss'

const defaultProps: IndexDiyModule = {
  name: '',
  moreUrl: '',
  data: [],
  isUser: true,
  type: ''
}

const IndexSaleLimit1: React.FC<IndexDiyModule<IndexDiyModuleLimit[]>> = (props) => {
  const [goods, setGoods] = useState<IndexDiyModuleLimit[]>([])
  const [subscript, setSubscript] = useState(0)
  const dataColor = Taro.getStorageSync('colorData');

  useEffect(() => {
    const data: any = props.data.slice()
    setGoods(data)
    setSubscript(0)
  }, [props.data])
  const swiperChange = (e) => {
    const i = e.detail.current
    setSubscript(i)
  }

  const renderRefundSignOfRight = (item) => {
    const refund_signArr = item.refund_sign ? item.refund_sign.split(",") : "";

    if(refund_signArr.length > 0) {
      return refund_signArr.map((sign, index) => (
        !!sign &&
        <Text
          key={index}
          key={index} className='label'
          style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
        >{sign}</Text>
      ))
    }

    return <Block />;
  }

  return (
    <View className='index-sale-1 index-sale-box'>
      {(props.name || props.moreUrl) && <View className='title-box'>
        <View className='title'>{props.name}</View>
        {!!props.moreUrl && <View className='more' onClick={() => gotoPage(props.moreUrl)}>
          <Text>更多</Text>
          <View className='icon'><AtIcon value='chevron-right' size='10' color='#666' /></View>
        </View>}
      </View>}
      {!props.name && !props.moreUrl && <View style='height: 10px' />}
      <View className='content-box'>
        <View className='wrap'>
          <View className='swiper-box'>
            <Swiper className='swiper' autoplay interval={2000} onChange={swiperChange} current={subscript}>
              {props.data.length > 0 && props.data.map(item => <SwiperItem key={item.id}>
                <View onClick={()=>{Taro.navigateTo({url: item.url})}}><Image src={(item.main_img || item.img) + '?x-oss-process=image/resize,w_710'} mode='aspectFill'
                  className='img'
                /></View>
              </SwiperItem>)}
            </Swiper>
            <View className='indicator-box'>
              {props.data.map((item, i) => <View key={item.id}
                className={`indicator-item ${i === subscript && 'active'}`}
              />)}
            </View>
          </View>
          {goods[subscript] && <View onClick={()=>{Taro.navigateTo({url: goods[subscript].url})}}><View className='info'>
            {goods[subscript] && goods[subscript].name && <View className='name'>{goods[subscript].name}</View>}
            {goods[subscript].sub_title && <View className='subTitle'>{goods[subscript].sub_title}</View>}
            {!!platform.info.is_show_sales_volume && !!goods[subscript].sales_volume &&
            <View className='subTitle'>销量：{goods[subscript].sales_volume}笔</View>}
            {
              ((goods[subscript] && goods[subscript].serviceLabels && goods[subscript].serviceLabels.length > 0) || (goods[subscript] && goods[subscript].refund_sign)) &&
              <View className='labels'>
                {goods[subscript].serviceLabels && goods[subscript].serviceLabels.length > 0 && goods[subscript].serviceLabels.map((items, index) =>
                  <Text
                    key={index}
                    key={index} className='label'
                    style={`border: 1Px solid ${dataColor.titleColor};color: ${dataColor.titleColor}`}
                  >{items.name}</Text>)}
                {
                  process.env.P_ENV === 'kd' && goods[subscript] && goods[subscript].refund_sign &&
                  renderRefundSignOfRight(goods[subscript])
                }
              </View>
            }
            {(process.env.P_ENV === 'vc' || process.env.P_ENV === 'kunxin') && goods[subscript] &&
            goods[subscript].is_free_visit && goods[subscript].is_free_visit == 1 ?
              <View className='info-box'>
                <View className='left'><View className='price' /></View>
                <View className='right'><View className='snapped-up'>免费入园</View></View>
              </View> :
            <View className='info-box'>
              <View className='left'>
                <View className='price'>
                  <View className='recommendation-block-item-bottom-price' style={`color: ${dataColor.priceColor};`}>
                    <Text className='m-min-b mark font-family-price' style={`color: ${dataColor.priceColor};position: relative;top: 5.85px !important`}>¥</Text>
                    {goods[subscript] && <View className='mark main inline font-family-price'
                      style={`color: ${dataColor.priceColor};position: relative;top: 5.85px !important`}
                    >
                      <Float value={goods[subscript].price} />
                    </View>}
                  </View>
                  {!!goods[subscript].is_activity ? <Block>
                    <Text className='discount limit-one-discount' style={`background-color: ${dataColor.priceColor};`}>拼团价</Text>
                  </Block> : <Block>
                    {!!goods[subscript].discount &&
                    <Text className='discount limit-one-discount' style={`background-color: ${dataColor.priceColor};`}><Text
                      className='font-family-price'
                    >{goods[subscript].discount}</Text>折</Text>}
                  </Block>}
                  {goods[subscript] && <Text className='m-min-b market-price margin-left'
                    style={`color: ${dataColor.originalPriceColor}`}
                  >市场价 ¥</Text>}
                  {goods[subscript] && <View className='m-min-b market-price inline'
                    style={`color: ${dataColor.originalPriceColor}`}
                  >
                    <Float value={goods[subscript].marketPrice || goods[subscript].market_price} />
                  </View>}
                </View>
              </View>
              <View className='right'>
                {/* 用户 */}
                {(!process.env.DISTINGUISH_IDENTITY || props.isUser || !goods[subscript].commission_price) &&
                <View className='snapped-up'>{goods[subscript].is_activity == 1 ? '立即拼团' : '立即抢购'}</View>}
                {/* 达人 */}
                {process.env.DISTINGUISH_IDENTITY && !props.isUser && !!goods[subscript].commission_price && <View className='share-earn'>
                  <View className='share-left'>分享赚</View>
                  <View className='price'>
                    <Text>￥</Text>
                    <View className='true-price-share font-family-price inline'>
                      <Float value={goods[subscript].commission_price || 0} />
                    </View>
                  </View>
                </View>}
              </View>
            </View>}
          </View></View>}
        </View>
      </View>
    </View>
  )
}
IndexSaleLimit1.defaultProps = defaultProps

export default IndexSaleLimit1
